<template>
  <div class="info-message">
    <Headline
      :headline1="$t('m.MessageApplication') + '  /  '"
      :headline2="$t('m.messageTemplate')"
    />
    <a-card style="width: 100%">
      <a-input-search
        style="width: 310px; margin-bottom: 30px"
        :placeholder="$t('m.PleaseEnterYourSearchTerms')"
        :enter-button="$t('m.Inquire')"
        size="default"
        v-model="forminitial.key"
        @search="infoMessageSearch"
      />

      <a-button
        icon="plus"
        style="margin-left: 15px"
        type="primary"
        @click="add"
        v-if="isTrue('msg:wechat:template:add')"
      >
        {{ $t("m.Add") }}
      </a-button>
      <a-modal
        :title="$t('m.TemplateMessageConfiguration')"
        :visible="visible"
        @cancel="handleCancel"
        :footer="null"
        :maskClosable="false"
      >
        <a-form
          @submit="handleSubmit"
          :form="form"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-form-item style="display: none">
            <a-input v-decorator="['id']"> </a-input>
          </a-form-item>
          <a-form-item :label="$t('m.TheTemplateNumber')">
            <a-input :disabled="istu"
              v-decorator="[
                'templateCode',
                {
                  rules: [
                    { required: true, message: this.$t('m.pleaseInput') },
                  ],
                },
              ]"
            >
            </a-input>
          </a-form-item>
          <a-form-item :label="$t('m.messageName')">
            <a-input
              v-decorator="[
                'templateName',
                {
                  rules: [
                    { required: true, message: this.$t('m.pleaseInput') },
                  ],
                },
              ]"
            >
            </a-input>
          </a-form-item>
          <a-form-item :label="$t('m.TheTemplateID')">
            <a-input v-decorator="['templateId']"> </a-input>
          </a-form-item>
          <a-form-item :label="$t('m.remark')">
            <a-input v-decorator="['remark']"> </a-input>
          </a-form-item>
          <a-form-item :label="$t('m.example')">
            <a-textarea
              v-decorator="[
                'demo',
                { rules: [{ required: true, message: '请输入你的示例!' }] },
              ]"
            >
            </a-textarea>
          </a-form-item>
          <a-form-item :label="$t('m.TheTemplate')">
            <a-textarea
              v-decorator="[
                'template',
                { rules: [{ required: true, message: '请输入你的模板!' }] },
              ]"
            >
            </a-textarea>
          </a-form-item>
          <a-form-item
            style="display: flex; justify-content: right"
            :wrapper-col="{ span: 12, offset: 5 }"
          >
            <a-button
              type="primary"
              html-type="submit"
              style="margin-left: 93px"
            >
              确定
            </a-button>
          </a-form-item>
        </a-form>
      </a-modal>

      <a-table
        :rowKey="(record) => record.id"
        :data-source="data"
        :columns="columns"
        :pagination="false"
        bordered
      >
        <div slot="index" slot-scope="text, tags, i">
          {{ i + 1 + (forminitial.page - 1) * forminitial.limit }}
        </div>

        <div slot="operation" slot-scope="text, tags, i">
          <a-button
            style="margin-right: 15px"
            icon="edit"
            type="primary"
            @click="editModule(text, tags, i)"
            :disabled="!isTrue('msg:wechat:template:update')"
            >{{ $t("m.Modification") }}</a-button
          >
          <a-button
            icon="delete"
            type="danger"
            @click="delModule(text, tags, i)"
            :disabled="!isTrue('msg:wechat:template:del')"
            >{{ $t("m.Delete") }}</a-button
          >
        </div>
      </a-table>
      <a-pagination
        style="margin-top: 20px"
        show-size-changer
        :default-current="1"
        :total="total"
        @change="Pages"
        :pageSizeOptions="['5', '10', '30', '40']"
        @showSizeChange="onShowSizeChange"
        class="pages"
      />
    </a-card>
    <Delete ref="unitdelete" :dalete="dalete" @confirm="delIsok"></Delete>
  </div>
</template>

<script>
import { getMsgCfgList, addMsgCfg, deleteMsgCfg } from "@/api/information";
import Headline from "@/components/Headline";
import Delete from "@/components/Delete";
import { Setperms } from "@/assets/js/setperms";

export default {
  name: "InfoMessage",
  components: { Headline, Delete },

  data() {
    return {
      forminitial: {
        key: "",
        start: 0,
        limit: 10,
        page: 1,
      },
      dalete: {
        titles: this.$t("m.DeleteThePrompt"),
        type: "exclamation-point",
        text: this.$t("m.AreYouSureToDeleteThisData"),
      },
      istu:false,
      data: [],
      columns: [
        {
          title: this.$t("m.SerialNumber"),
          scopedSlots: { customRender: "index" },
        },
        { title: this.$t("m.TheTemplateNumber"), dataIndex: "templatecode" },
        { title: this.$t("m.Name"), dataIndex: "templatename" },
        { title: this.$t("m.TheTemplateID"), dataIndex: "templateid" },
        { title: this.$t("m.remark"), dataIndex: "remark" },
        {
          title: this.$t("m.Operation"),
          scopedSlots: { customRender: "operation" },
        },
      ],
      visible: false,
      form: this.$form.createForm(this, { templateCode: "coordinated" }),
      delId: "",
      total: 0,
    };
  },
  created() {
    this.getData();
    this.parms = Setperms(
      this.$route.fullPath,
      JSON.parse(sessionStorage.getItem("menu"))
    );
    console.log(this.parms);
  },
  methods: {
    isTrue(str) {
      return this.parms.indexOf(str) !== -1;
    },
    editModule(text, tags, i) {
      let data = JSON.parse(JSON.stringify(tags));
      this.istu = true
      setTimeout(() => {
        this.form.setFieldsValue({
          id: tags.id,
          templateCode: tags.templatecode,
          templateId: tags.templateid,
          templateName: tags.templatename,
          remark: tags.remark,
          demo: tags.demo,
          template:tags.template,
        });
      }, 200);
      this.visible = true;
    },
    // 确认删除
    delIsok() {
      deleteMsgCfg({ id: this.delId })
        .then((res) => {
          if (res.data.success == true) {
            this.$message.success(res.data.msg);
            this.getData();
          }
          if (res.data.success == false) {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          this.$message.error("操作失败");
        });
      this.$refs.unitdelete.visible = false;
    },
    delModule(text, tags, i) {
      this.$refs.unitdelete.visible = true;
      this.delId = tags.id;
    },
    onShowSizeChange(page, limit) {
      this.forminitial.page = page;
      this.forminitial.limit = limit;
      this.getData();
    },
    Pages(page, pageSize) {
      this.forminitial.limit = pageSize;
      this.forminitial.page = page;
      this.forminitial.start = (page - 1) * pageSize;
      this.getData();
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log(values);
          addMsgCfg({ ...values })
            .then((res) => {
              if (res.data.success == true) {
                this.$message.success(res.data.msg);
                this.getData();
              }
              if (res.data.success == false) {
                this.$message.error(res.data.msg);
              }
            })
            .catch((err) => {
              this.$message.error("操作失败");
            });
          this.form.resetFields();
          this.visible = false;
        }
      });
    },
    handleCancel() {
      this.form.resetFields();
      this.visible = false;
    },
    add() {
      this.visible = true;
       this.istu = false;
    },
    infoMessageSearch() {
      this.getData();
    },

    getData() {
      getMsgCfgList({ params: this.forminitial })
        .then((res) => {
          // this.data = res.data.data;
          res.data.data.forEach((item) => {
            item = JSON.parse(JSON.stringify(item));
          });
          console.log(res.data.data);
          this.data = res.data.data;
          this.total = res.data.total;
        })
        .catch((err) => {
          // this.$message.error("获取数据失败");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
